import React,{useState,useRef} from 'react'
import {Button,Modal,Input,Select,Card,message} from 'antd'
import {nanoid} from 'nanoid'
export default function AddStore() {
    const myRef=useRef()
    const { Option } = Select;
    const [infoArr]=useState([{name:'总部编码',id:'code'},{name:'总部名称',id:'name'},{name:'分部编码',id:'partCode'},{name:'门店名称',id:'pname'},{name:'区域',id:'district'},{name:'门店状态',id:'status'},{name:'联系人',id:'contact'},{name:'电话',id:'phone'},{name:'传真',id:'fax'},{name:'省份',id:'province'},{name:'城市',id:'city'},{name:'区/镇',id:'town'},{name:'楼层',id:'floor'},{name:'地址',id:'address'}])
    const [isModalVisible, setIsModalVisible] = useState(false)
    const [info,setInfo]=useState({part:[]})
    const [infoP,setInfoP]=useState({})
    const [infoAll,setInfoAll]=useState([])
    const [isEdit,setIsEdit]=useState({type:false,code:''})
    const [partShow,setPartShow]=useState({type:false,code:''})
    const [isSearch,setSearch]=useState({type:false,name:'',partType:false,partName:''})
    function edit(which,type,code){
        return ()=>{
            setIsModalVisible(true)  
            if(which==='part'){
                setPartShow({type:true,code})        
                if(type==='add'){  
                    setIsEdit({type:false,code:''})                      
                    const newObj={...infoP}
                    for(let i in newObj){
                        newObj[i]=''
                    }
                    setInfoP(newObj)                       
                }
                else if(type==='edit'){
                    setIsEdit({type:true,code})
                
                }
            }else if(which==='head'){
                setPartShow({type:false,code:''})           
                if(type==='add'){                       
                    const newObj={...info}
                    for(let i in newObj){
                        if(i!=='part'){
                            newObj[i]=''
                        }else{
                            newObj[i]=[]
                        }
                    }
                    setInfo(newObj)
                    setIsEdit({type:false,code:''})                                  
                }
                else if(type==='edit'){     
                    setIsEdit({type:true,code})
                    infoAll.forEach((item)=>{
                        if(item.code===code){
                            setInfo(item)
                        }
                    })
                }
            }
          
        }
    }
    // 添加数据
    function handleOk(){
        if(isEdit.type){
            if(partShow.type){
                const newArr=[...infoAll]
                newArr.forEach((item)=>{
                    item.part.forEach((i,index)=>{
                            if(i.partCode===isEdit.code){
                               item.part[index]=infoP
                             
                            }
                    })
                   })
                   setInfoAll(newArr)
            }else{
                if(info.name===undefined){
                    message.error('请输入总店名称')
                    return
                }
                const newArr=[...infoAll]
                newArr.forEach((item,index)=>{
                 if (item.code===isEdit.code){
                     newArr[index]=info                
                 }
                 setInfoAll(newArr)
                })
            }    
        }else{         
         if(!partShow.type){
            if(info.name===undefined){
                message.error('请输入总店名称')
                return
            }
          const newArr=[...infoAll]
          for(let i =0;i<newArr.length;i++){
            if(newArr[i].code===info.code){
                message.error('总店编码已经存在！');
                return
            }
        }
         newArr.push(info)
         setInfoAll(newArr)
         }else{
             const newArr=[...infoAll]
            newArr.forEach((i)=>{
                if(i.code===partShow.code){
                    i.part.push(infoP)                         
                }
            })
           setInfoAll(newArr)         
         }
         
       
        }
      
        setIsModalVisible(false)
    }
    // 取消按钮
    function handleCancel(){
        const newObj={...info}
        for(let i in newObj){
            if(i!=='part'){
                newObj[i]=''
            }else{
                newObj[i]=[]
            }
        }
        setInfo(newObj)
        setIsModalVisible(false)
    }
    // 存储数据
    function   getInfo(type,id){
        if(type==='head'){    
            return (e)=>{
                const newObj={...info}
              if(id!=='status'){
                newObj[id]=e.target.value
                setInfo(newObj)
              }else{
                newObj[id]=e
                setInfo(newObj)
              }
            }
        }else if(type==='part'){      
            return (e)=>{
                const newObj={...infoP}
                if(id!=='status'){
                    newObj[id]=e.target.value
                    setInfoP(newObj)

                  }else{
                    newObj[id]=e
                    setInfoP(newObj)
                  }
            }
        }
       
    }
    // 删除总店信息
    function delInfo(code,type){
        if(type!=='part'){
            return ()=>{
                const newArr=[...infoAll]
                 newArr.forEach((item,index)=>{
                     if(item.code===code){
                        newArr.splice(index,1)
                     }
                    
                })
                setInfoAll(newArr)
               }
        }
        else{
            return ()=>{
                const newArr=[...infoAll]
                 newArr.forEach((item)=>{
                    item.part.forEach((i,index)=>{
                        if(code===i.partCode){
                            item.part.splice(index,1)
                        }
                        
                    })
                    
                })
                setInfoAll(newArr)
               }
        }
    }
    // 搜索框
    function search(e){
        console.log(myRef);
        if(e!=='全部'){
            setSearch({type:true,partType:false,name:e,pname:'全部'})
        }else{
            setSearch({type:false,partType:false,name:'',pname:'全部'})
        }
        
    }
    function partSearch(e){
        if(e!=='全部'){
            const newObj={...isSearch}
            newObj.partType=true
            newObj.pname=e
            setSearch(newObj)
        }else{
            const newObj={...isSearch}
            newObj.partType=false
            newObj.pname=''
            setSearch(newObj)
        }
    }
    return (
        <>
                      <span >选择总部：</span>
                    <Select defaultValue="全部" style={{margin:'0px 20px 0px 0px',width: 100}} onChange={search} >
                    <Option value="全部">全部</Option>
                    {   
                        infoAll.map(item=>{
                            return <Option value={item.name} key={nanoid()}>{item.name}</Option>
                        })
                        
                    }              
                    </Select>
                    <span >选择分部：</span>
                    <Select  style={{margin:'0px 20px 0px 0px',width: 100}} defaultValue="全部" onChange={partSearch} ref={myRef} value={isSearch.pname}>
                    <Option value="全部">全部</Option>
                    {   
                        infoAll.map((item)=>{
                           if(item.name===isSearch.name){
                             return item.part.map((i)=>{
                                    return <Option value={i.pname} key={nanoid()}>{i.pname}</Option>
                                 })
                            }
                        })
                        
                    }
                  
                    </Select>
             <Button type="primary" onClick={edit('head','add')}>增加门店</Button>
             <Modal title="增加门店" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} footer={[
                  <Button key="submit" type="primary"  onClick={handleOk}>
                  保存
                 </Button>,
                   <Button key="back" onClick={handleCancel}>
                   返回
                 </Button>
                
                     ]}>
                 <div className="flex">
               
                   {    
                      infoArr.map((item)=>{
                          if(partShow.type){
                            if(item.name!=='门店状态'&&item.name!=='地址'&&item.name!=='总部编码'&&item.name!=='总部名称'){
                                return <div key={item.id} style={{marginBottom:'20px'}} >
                                <span >{item.name}:</span><Input  style={{width:'120px'}} onChange={getInfo('part',item.id)} value={infoP[item.id]}/>
                                </div>
                              }       
                              else if(item.name==='门店状态'){
                                return  <div key={item.id} style={{marginBottom:'20px'}}>
                                <span >{item.name}:</span>
                                <Select  style={{ width: 100 }} onChange={getInfo('part',item.id)} value={infoP[item.id]} >
                                    <Option key={nanoid()} value="营业中">营业中</Option>
                                    <Option key={nanoid()} value="休业中">休业中</Option>
                                 </Select>  
                                   
                                    </div>
                              }   
                              else if(item.name==='地址')  {
                                return  <div key={item.id} style={{marginBottom:'20px'}}>
                                <span >{item.name}</span><Input onChange={getInfo('part',item.id)} value={infoP[item.id]}/>
                                
                                </div>
                              } 
                          }else{
                            if(item.name!=='门店状态'&&item.name!=='地址'&&item.name!=='分部编码'&&item.name!=='楼层'&&item.name!=='门店名称'){
                                return <div key={item.id} style={{marginBottom:'20px'}} >
                                <span >{item.name}:</span><Input  style={{width:'120px'}} onChange={getInfo('head',item.id)} value={info[item.id]}/>
                                </div>
                              }       
                              else if(item.name==='门店状态'){
                                return  <div key={item.id} style={{marginBottom:'20px'}}>
                                <span >{item.name}:</span>
                                <Select defaultValue='营业中'   onChange={getInfo('head',item.id)} value={info[item.id]} style={{ width: 100 }}> 
                                    <Option key={nanoid()} value="营业中">营业中</Option>
                                    <Option key={nanoid()} value="休业中">休业中</Option>
                                 </Select>  
                                   
                                    </div>
                              }   
                              else if(item.name==='地址')  {
                                return  <div key={item.id} style={{marginBottom:'20px'}}>
                                <span >{item.name}</span><Input onChange={getInfo('head',item.id)} value={info[item.id]}/>
                                
                                </div>
                              } 
                          }        
                      })
                   }                     
                 </div>
                </Modal>
                <div>
                {                   
                    infoAll.map((item)=>{
                        if(isSearch.type){
                            if(item.name===isSearch.name){                             
                                return   <div className="site-card-border-less-wrapper" key={nanoid()}>
                                <Card title="总部信息" bordered={true} style={{ width: '80vw',margin:'20px 0px'}}>
                                <div className="flexInfo">
                                    <div>总部编码：{item.code}</div>   
                                    <div>总部名称：{item.name}</div>  
                                    <div>区域：{item.district}</div>               
                                </div>
                                <div className="flexInfo">
                                <div>门店状态：{item.status}</div>  
                                     <div>联系人：{item.contact}</div>   
                                    <div>电话：{item.phone}</div>  
                                    <div>传真：{item.fax}</div> 
                                </div>
                                <div className="flexInfo">
                                     <div>省份：{item.province}</div>   
                                    <div>城市：{item.city}</div>  
                                    <div>区/镇：{item.town}</div> 
                                </div>
                                <div className="flexInfo">
                                    <div>地址:{item.address}</div>
                                </div>
                                <div className="flexInfo">
                                <Button type="primary" onClick={edit('head','edit',item.code)}>编辑</Button> <Button type="ghost" onClick={delInfo(item.code,'head')}>删除</Button> <Button type="default" style={{color:'orange'}} onClick={edit('part','add',item.code)}>增加分店</Button> 
                                </div>
                                </Card>
                            </div>
                            }
                        }else{
                            return   <div className="site-card-border-less-wrapper" key={nanoid()}>
                            <Card title="总部信息" bordered={true} style={{ width: '80vw',margin:'20px 0px'}}>
                            <div className="flexInfo">
                                <div>总部编码：{item.code}</div>   
                                
                                <div>总部名称：{item.name}</div>  
                                <div>区域：{item.district}</div>               
                            </div>
                            <div className="flexInfo">
                            <div>门店状态：{item.status}</div>  
                                 <div>联系人：{item.contact}</div>   
                                <div>电话：{item.phone}</div>  
                                <div>传真：{item.fax}</div> 
                            </div>
                            <div className="flexInfo">
                                 <div>省份：{item.province}</div>   
                                <div>城市：{item.city}</div>  
                                <div>区/镇：{item.town}</div> 
                            </div>
                            <div className="flexInfo">
                                <div>地址:{item.address}</div>
                            </div>
                            <div className="flexInfo">
                            <Button type="primary" onClick={edit('head','edit',item.code)}>编辑</Button> <Button type="ghost" onClick={delInfo(item.code,'head')}>删除</Button> <Button type="default" style={{color:'orange'}} onClick={edit('part','add',item.code)}>增加分店</Button> 
                            </div>
                            </Card>
                        </div>
                        }
                       
                    })
                }
                </div>
                <div>
                {
                    infoAll.map((item)=>{
                        if(isSearch.type){
                            if(item.name===isSearch.name){
                                if(isSearch.partType){
                              return   item.part.map((partInfo)=>{
                                    if(partInfo.pname===isSearch.pname){
                                        return  <div className="site-card-border-less-wrapper" key={nanoid()}>
                                        <Card title="分部信息" bordered={true} style={{ width: '80vw',margin:'20px 0px'}}>
                                        <div className="flexInfo">
                                            <div>总部编码：{item.code}</div>   
                                            <div>分部编码：{partInfo.partCode}</div> 
                                            <div>总部名称：{item.name}</div>  
                                            <div>门店名称：{partInfo.pname}</div>  
                                        </div>
                                        <div className="flexInfo">
                                        <div>门店状态：{partInfo.status}</div>  
                                             <div>联系人：{partInfo.contact}</div>   
                                            <div>电话：{partInfo.phone}</div>  
                                            <div>传真：{partInfo.fax}</div> 
                                        </div>
                                        <div className="flexInfo">
                                        <div>区域：{partInfo.district}</div>
                                             <div>省份：{partInfo.province}</div>   
                                            <div>城市：{partInfo.city}</div>  
                                            <div>区/镇：{partInfo.town}</div> 
                                        </div>
                                        <div className="flexInfo">
                                            <div>地址:{partInfo.address}</div>
                                        </div>
                                        <div className="flexInfo">
                                        <Button type="primary" onClick={edit('part','edit',partInfo.partCode)}>编辑</Button> <Button type="ghost" onClick={delInfo(partInfo.partCode,'part')}>删除</Button> 
                                        </div>
                                        </Card>
                                    </div>
                                    }
                                   })
                                }else{
                                 return  item.part.map((partInfo)=>{                          
                                        return  <div className="site-card-border-less-wrapper" key={nanoid()}>
                                        <Card title="分部信息" bordered={true} style={{ width: '80vw',margin:'20px 0px'}}>
                                        <div className="flexInfo">
                                            <div>总部编码：{item.code}</div>   
                                            <div>分部编码：{partInfo.partCode}</div> 
                                            <div>总部名称：{item.name}</div>  
                                            <div>门店名称：{partInfo.pname}</div>  
                                        </div>
                                        <div className="flexInfo">
                                        <div>门店状态：{partInfo.status}</div>  
                                             <div>联系人：{partInfo.contact}</div>   
                                            <div>电话：{partInfo.phone}</div>  
                                            <div>传真：{partInfo.fax}</div> 
                                        </div>
                                        <div className="flexInfo">
                                        <div>区域：{partInfo.district}</div>
                                             <div>省份：{partInfo.province}</div>   
                                            <div>城市：{partInfo.city}</div>  
                                            <div>区/镇：{partInfo.town}</div> 
                                        </div>
                                        <div className="flexInfo">
                                            <div>地址:{partInfo.address}</div>
                                        </div>
                                        <div className="flexInfo">
                                        <Button type="primary" onClick={edit('part','edit',partInfo.partCode)}>编辑</Button> <Button type="ghost" onClick={delInfo(partInfo.partCode,'part')}>删除</Button> 
                                        </div>
                                        </Card>
                                    </div>
                                 })
                                }                      
                            }                          
                        }else{
                            return  item.part.map((partInfo)=>{
                                return  <div className="site-card-border-less-wrapper" key={nanoid()}>
                                <Card title="分部信息" bordered={true} style={{ width: '80vw',margin:'20px 0px'}}>
                                <div className="flexInfo">
                                    <div>总部编码：{item.code}</div>   
                                    <div>分部编码：{partInfo.partCode}</div> 
                                    <div>总部名称：{item.name}</div>  
                                    <div>门店名称：{partInfo.pname}</div>  
                                </div>
                                <div className="flexInfo">
                                <div>门店状态：{partInfo.status}</div>  
                                     <div>联系人：{partInfo.contact}</div>   
                                    <div>电话：{partInfo.phone}</div>  
                                    <div>传真：{partInfo.fax}</div> 
                                </div>
                                <div className="flexInfo">
                                <div>区域：{partInfo.district}</div>
                                     <div>省份：{partInfo.province}</div>   
                                    <div>城市：{partInfo.city}</div>  
                                    <div>区/镇：{partInfo.town}</div> 
                                </div>
                                <div className="flexInfo">
                                    <div>地址:{partInfo.address}</div>
                                </div>
                                <div className="flexInfo">
                                <Button type="primary" onClick={edit('part','edit',partInfo.partCode)}>编辑</Button> <Button type="ghost" onClick={delInfo(partInfo.partCode,'part')}>删除</Button> 
                                </div>
                                </Card>
                            </div>
                            })
                        }
                      
                    })
                }
                </div>

        </>
    )
}
